<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    ul {
        /* height: 1000px; */
        margin: 0;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    li {
        height: 100px;
        border-bottom: 2px solid deepskyblue;
    }

    b {
        vertical-align: top;
    }
</style>

<body>
    <ul class="container">
        <!-- <li>
            <img width="100" src="http://a.manmanbuy.com:8013/cuxiaoPic/201610/2016100012575382955.jpg" alt="">
            <b>酱油</b>
        </li> -->
    </ul>
</body>

</html>
<script src="./lozyLoad.js"></script>
<script>
    //思路:

    //1.页面刚加载的时候,需要发送请求,获得第一页的数据

    //2.得到数据之后需要将它展示在页面上

    //3.滚动条滚动快要接近底部的时候,重新发起请求,获取新数据

    //4.再次将数据渲染在页面上

    //获取元素

    let container = document.querySelector('.container')

    // 步骤

    //1.声明一个根据数据渲染页面的函数

    function render(data, el) {
        console.log(data, el)
        // ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️老的写法✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

        // let domStr = ""

        //遍历data数据,动态的替换模板字符串中的数据

        //逻辑做一些削微的变化,需要动态创建li 后续通过append方式追加到页面中

        // data.forEach(item => {
        //     let regExp = /^<[^<]+\s+src="([^''""]*)"/
        //     let result = item.productImg2.match(regExp)
        //     // console.log(result)
        //     result = result[1];//这次的结果还不能直接使用
        //     //再次正则匹配
        //     // console.log(result)
        //     result = result.match(/(?<=imgurl=)[^']*/);
        //     // console.log(result[0])
        //     domStr += `<li>
        //     <img width="100" src=${result[0]} alt="">
        //     <b>${item.productName}</b>
        // </li>`
        // })

        // el.innerHTML = domStr

        // ✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️改进后的写法✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️✂️

        data.forEach(item => {
            let li = document.createElement('li');
            //一步到位取出img地址
            let regExp = /(?<=imgurl=)[^'"]*/
            let result = item.productImg2.match(regExp)
            let domStr = `
             <img width="100" src=${result[0]} alt="">
             <b>${item.productName}</b>`
            //把上面的字符串结构放到li里面
            li.innerHTML = domStr;
            //把li添加到页面的容器中
            el.appendChild(li)
        })
    }

    //2.首次发起页面请求
    function getData(pageid = 1) {
        fetch(`://chst.vip:1234/api/getmoneyctrl?pageid=${pageid}`)
            .then(body => body.json())
            .then(res => {
                console.log(res)
                render(res.result, container)
            })
    }

    getData() //首次调用

    //声明初始的pageid

    let pageid = 1;

    lazyLoad(function () {
        // 在这里发送请求
        pageid++
        if (pageid > 14) {
            alert('服务器没有更多数据了')
            return
        }
        //pageid最多到14;超过了 服务器就没有数据响应了
        getData(pageid)
        // console.log('999999')
    }, 100)
</script>